<template>
  
   <div class="photo-gallery">
      <div class="photo-container" v-for="(photo, index) in photos" :key="index">
         <a :href="externalUrl" target="_blank" rel="noopener noreferrer">
            <img :src="photo" :alt="'Photo ' + (index + 1)" />
         </a>
      </div>
   </div>
</template>

<script>
export default {
   name: 'PhotoGallery',
   data() {
      return {
         photos: [
            'https://www.codelover.club/files/stutasks/userID_894/currNo_43/Fkfu0Q3IGFJDSWZkSPY5JA-h205L.jpg',
            'https://www.codelover.club/files/stutasks/userID_894/currNo_43/Fpdybm720SZ0VUEeoXwiD6IIVvqi.jpg',
            'https://www.codelover.club/files/stutasks/userID_894/currNo_43/FmJKzP-ETEOwZkN4TQ0tu9gCrwig.jpg',
            'https://www.codelover.club/files/stutasks/userID_894/currNo_43/Ft1e1oKgiNkp_FFj025ELD8fowr3.jpg',
            'https://www.codelover.club/files/stutasks/userID_894/currNo_43/Fviuu08PDNxXl0ocHcqp-Xpkdvw9.jpg',
            'https://www.codelover.club/files/stutasks/userID_894/currNo_43/Fk2p3qk0mcZls7ef7WbnO334QwDu.jpg',
            'https://www.codelover.club/files/stutasks/userID_894/currNo_43/Foza67b4I59oC4hLOe2_Uc6BRxYP.jpg',
            'https://www.codelover.club/files/stutasks/userID_894/currNo_43/FuEZRQLQKd_qpo7wuxeEDvbx8lBR.jpg',
            'https://www.codelover.club/files/stutasks/userID_894/currNo_43/Fh-EyFtxnUAO_q4GXEQSZMM0tiJx.jpg',

         ],
         externalUrl: 'https://codelover.club/coursefiles/lnnpREORzoIdSs-hRgPHOKXVIzwM.mp4', // 替换为你的外部网站URL  
      };
   },
};  
</script>
<style scoped>
.photo-gallery {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   padding: 20px;
   background-color: #ebc1c1;
   
}

.photo-container {
   margin: px;
   width: calc((100% - 20px * 2) / 3);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
   border-radius: 10px;
   overflow: hidden;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.photo-container:hover {
   transform: scale(1.05);
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.photo-container img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: cover;
   border-radius: inherit;
}

.e {
   background-color: #ebc1c1
}
</style>